<template>
  <div class="statsCard" style="width: 33%">
    <span style="font-weight: bold;font-size: 18px">AGV数量统计</span>
    <v-chart ref="currentRef"></v-chart>
  </div>
</template>

<script setup>
import { onMounted, ref, watchEffect } from "vue";
import * as echarts from "echarts";

// 图表的配置
const currentRef = ref(null);
const renderOption = () => {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "5%",
      right: "5%",
      bottom: "6%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: "category",
      data: ["空闲", "运行", "故障", "充电", "离线"],
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#333",
        },
      },
    },
    series: [
      {
        name: "数量",
        type: "bar",
        data: [0, 0, 0, 0, 14],
        barWidth: "30%",
        itemStyle: {
          color: "#bbd5fd",
        },
      },
    ],
  };
};
onMounted(() => {
  currentRef.value.setOption(renderOption());
});
watchEffect(() => {
  if (currentRef.value) {
    currentRef.value.resize();
  }
});
</script>

<style lang="scss" scoped>
.statsCard {
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}
</style>